<template>
  <div class="wrapBox">
    <div class="haeder animation">
      <div class="titleBar">
        <div class="text">
          客户统计
          <el-tooltip class="item" effect="dark" placement="right-start">
            <div slot="content">
              <div style="font-size: 14px; margin-top: 5px" v-for="text in tipsText">{{ text }}</div>
            </div>
            <i class="el-icon-warning-outline icon"></i>
          </el-tooltip>
        </div>
      </div>
      <!-- 概况 -->
      <el-row  :gutter="24" class="mb24">
        <el-col  :span="24">
          <el-tabs v-model="tabPaneDefaultActiveName" @tab-click="handleTabPaneClick">
            <el-tab-pane v-for="(item, index) in 3" :label="tabPane[index]" :name="tabPaneActiveName[index]" :key="index" class="item">
              <el-row  :gutter="24" class="mb24">
                <el-col  :span="4"  v-for="item in summary[index]" >
                  <el-col :span="24" style="text-align: left;margin-top: 20px;">
                    <span style="font-size: 14px;color: rgba(0,0,0,.5);font-weight: 500;">{{ item.label }}</span>
                  </el-col>
                  <el-col :span="24"  style="text-align: left;margin-top: 10px;">
                    <span style="font-size: 22px;color: black;font-weight: 600;">{{ baseInfo[`${item.prop}`] || 0 }}</span>
                    <span style="font-size: 13px;color: rgba(0,0,0,.5);font-weight: 500;margin-left: 5px;">{{ item.unit }}</span>
                  </el-col>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <div class="content"></div>
  </div>
</template>

<script>
import { customerOverview } from '@/api/biz/index'
import dayjs from 'dayjs'
export default {
  name: 'CustomerInfoSummaryChart',
  data() {
    return {
      tabPaneActiveIndex:0,
      tabPaneDefaultActiveName:'first',
      tabPaneActiveName:['first','second','third'],
      tabPane:['月度','年度','累计'],
      baseInfo: {},
      queryParams: {
        type: ['month', 'month', 'month'],
        time: [
          [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
          [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
          [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
        ],
      },
      tipsText: [
        '统计说明',
        '本月新增客户数=本月新创建的客户个数',
        '今年新增项目=今年新创建的客户个数',
        '累计项目数=历史至当月新创建的客户个数',
        '本月签约客户数=合同签约日期为本月的客户数合计（去重）',
        '今年签约客户数=合同签约日期为今年的客户数合计（去重）',
        '累计签约客户数=历史至当月有签约的客户数合计（去重）',
        '本月签约额=合同签约日期为本月的签约额合计',
        '今年签约额=合同签约日期为今年的签约额合计',
        '累计签约额=历史至当月的签约客户的签约额合计',
        '本月待回款=客户关联销售合同中计划回款时间为本月，支付状态为“到期未开票”+“已开票未回款”状态的金额合计',
        '今年待回款=客户关联销售合同中计划回款时间为今年，支付状态为“到期未开票”+“已开票未回款”状态的金额合计',
        '累计待回款=客户关联销售合同中，支付状态为“到期未开票”+“已开票未回款”状态的金额合计',
        '本月到期未开票=客户关联销售合同中计划回款时间为本月，支付状态为“到期未开票”状态的金额合计',
        '今年到期未开票=客户关联销售合同中计划回款时间为今年，支付状态为“到期未开票”状态的金额合计',
        '累计到期未开票=客户关联销售合同中，支付状态为“到期未开票”状态的金额合计',
        '本月已开票未回款=客户关联销售合同中计划回款时间为本月，支付状态为“已开票未回款”状态的金额合计',
        '今年已开票未回款=客户关联销售合同中计划回款时间为今年，支付状态为“已开票未回款”状态的金额合计',
        '累计已开票未回款=客户关联销售合同中，支付状态为“已开票未回款”状态的金额合计',
        '本月已回款=客户关联销售合同中实际回款时间为本月，支付状态为“已回款”状态的金额合计',
        '今年已回款=客户关联销售合同中实际回款时间为今年，支付状态为“已回款”状态的金额合计',
        '累计已回款=客户关联销售合同中，支付状态为“已回款”状态的金额合计',
        '累计未到期=客户关联销售合同中，支付状态为“未到期”状态的金额合计',
        '销售转化率=签约客户数 / 市场支出客户数',
        '本月客情支出=市场拓展中拓展类型为“项目客户”的本月支出合计',
        '今年客情支出=市场拓展中拓展类型为“项目客户”的今年支出合计',
        '累计客情支出=市场拓展中拓展类型为“项目客户”的累计支出',
      ],
      summary: [
        [
          {
            label: '新增客户数',
            prop: 'monthAddCustomer',
            unit: '个',
          },
          {
            label: '签约客户数',
            prop: 'monthSignCustomer',
            unit: '个',
          },
          {
            label: '签约额',
            prop: 'monthSignContractAmount',
            unit: '万元',
          },
          {
            label: '已回款',
            prop: 'monthReceivedPayment',
            unit: '万元',
          },
          {
            label: '待回款',
            prop: 'monthPendingPayment',
            unit: '万元',
          },
          {
            label: '已开票未回款',
            prop: 'monthInvoicedUnpaid',
            unit: '万元',
          },
          {
            label: '到期未开票',
            prop: 'monthExpiredNotInvoiced',
            unit: '万元',
          },
          {
            label: '客情支出',
            prop: 'monthCustomerExpense',
            unit: '万元',
          },
        ],
        [

          {
            label: '新增客户数',
            prop: 'yearAddCustomer',
            unit: '个',
          },

          {
            label: '签约客户数',
            prop: 'yearSignCustomer',
            unit: '个',
          },
          {
            label: '签约额',
            prop: 'yearSignContractAmount',
            unit: '万元',
          },

          {
            label: '已回款',
            prop: 'yearReceivedPayment',
            unit: '万元',
          },
          {
            label: '待回款',
            prop: 'yearPendingPayment',
            unit: '万元',
          },
          {
            label: '已开票未回款',
            prop: 'yearInvoicedUnpaid',
            unit: '万元',
          },
          {
            label: '到期未开票',
            prop: 'yearExpiredNotInvoiced',
            unit: '万元',
          },
          {
            label: '客情支出',
            prop: 'yearCustomerExpense',
            unit: '万元',
          },
          {
            label: '销售转化率',
            prop: 'salesConversionRate',
            unit: '%',
          }
        ],
        [
          {
            label: '客户数',
            prop: 'accumulateAddCustomer',
            unit: '个',
          },
          {
            label: '签约客户数',
            prop: 'accumulateSignCustomer',
            unit: '个',
          },
          {
            label: '签约额',
            prop: 'accumulateSignContractAmount',
            unit: '万元',
          },

          {
            label: '已回款',
            prop: 'accumulateReceivedPayment',
            unit: '万元',
          },
          {
            label: '待回款',
            prop: 'accumulatePendingPayment',
            unit: '万元',
          },
          {
            label: '已开票未回款',
            prop: 'accumulateInvoicedUnpaid',
            unit: '万元',
          },
          {
            label: '到期未开票',
            prop: 'accumulateExpiredNotInvoiced',
            unit: '万元',
          },
          {
            label: '未到期',
            prop: 'accumulateUnexpired',
            unit: '万元',
          },
          {
            label: '客情支出',
            prop: 'accumulateCustomerExpense',
            unit: '万元',
          },
        ],
      ],
      loading: true,
      color: ['#3692fd', '#f59063', '#49efcd', '#facf6a', '#fb627d', '#7cc934', '#b22c2a'],
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      customerOverview()
        .then((res) => {
          this.baseInfo = res.data
          this.$nextTick(() => {
            this.loading = false
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
     handleTabPaneClick(tab, event) {
      this.tabPaneDefaultActiveName=this.tabPaneActiveName[tab.index];
      this.tabPaneActiveIndex=tab.index;
    }

  },
}
</script>
<style lang="scss" scoped>
.wrapBox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  > .content {
    margin-top: 18px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .itemBox {
      width: 49.4%;
      margin-bottom: 15px;
      padding: 15px;
      box-sizing: border-box;
      > .echart {
        width: 100%;
        height: 360px;
      }
    }
  }
  > .haeder {
    padding: 15px 15px;
    box-sizing: border-box;
  }
}

.titleBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  > .text {
    width: 30%;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon {
      margin-left: 8px;
    }
    &::before {
      content: '';
      display: block;
      height: 18px;
      width: 5px;
      background: #3a95fc;
      margin-right: 8px;
    }
  }
  .content {
    margin-left: auto;
  }
}
.general {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  flex-shrink: 0;
  padding: 0 20px;
  box-sizing: border-box;
  > .item {
    width: 33%;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    > div {
      flex-shrink: 0;
      width: 33%;
      margin-bottom: 24px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: left;
      box-sizing: border-box;
      > .label {
        width: 100%;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color:rgba(0, 0, 0, 0.5)
      }
      .number {
        font-size: 22px;
        height: 28px;
        font-weight: 600;
        margin: auto 0;
        line-height: 1;
        display: flex;
        align-items: flex-end;
        justify-content: left;
        > span {
          line-height: 1;
        }
        > span:nth-child(2) {
          display: block;
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 2px;
          margin-left: 4px;
          color: #635f5f;
        }
      }
    }
  }
}

.animation {
  transition-duration: 0.2s;

  &:hover {
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    background: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
}
</style>
